<template>
  <div class="home">
    <el-card shadow="never">
      <!-- 导航部分 -->
      <el-row>
        <el-col :span="24"
          ><div id="div11" class="grid-content bg-purple-dark">
            <span>优惠券</span>
          </div>
        </el-col>
      </el-row>
      <!-- 名称标题 -->
      <div id="div2">
        <el-row>
          <el-col :span="24"> <div id="name">优惠券添加编辑</div></el-col>
        </el-row>
      </div>

      <div id="div3">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <!-- 优惠券名称 -->
          <el-form-item label="优惠券名称" prop="name">
            <el-input
              class="inputcontent"
              v-model="ruleForm.name"
              placeholder="请输入优惠券名称"
            ></el-input>
          </el-form-item>
          
          <!-- 面额 -->
          <el-form-item label="面额" prop="miane">
            <el-input
              class="inputcontent"
              v-model="ruleForm.face"
              placeholder="请输入面额抵扣金额"
            ></el-input>
          </el-form-item>
          <!-- 发放数量 -->
          <el-form-item label="发放数量" prop="sendnumber">
            <el-input
              class="inputcontent"
              v-model="ruleForm.count"
              placeholder="请输入优惠券发放总数量"
            ></el-input>
          </el-form-item>
          <!-- 每人可领数量 -->
          <el-form-item label="每人可领数量" prop="onegetnum">
            <el-input
              class="inputcontent"
              v-model="ruleForm.personCounts"
              placeholder="请输入单用户可领取的张数"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 活动时间 -->
        <el-form :inline="true" class="form2"  :model="ruleForm">
          <el-form-item label="活动时间">
            <el-input
               v-model="ruleForm.startTime"
              class="input2"
              placeholder="2021-05-06 00：00：00"
            ></el-input>
          </el-form-item>
          <el-form-item label="----" class="form-item">
            <el-input
            v-model="ruleForm.endTime"
              class="input2"
              placeholder="2021-05-06 00：00：00"
            ></el-input>
          </el-form-item>
        </el-form>

        <div id="table">
          <thead class="thead">
            <span id="span">支持课程</span>

            <!-- 添加课程按钮 -->
            <el-popover  placement="right" width="650" trigger="click" v-model="visible">
              <!-- 弹出框里面的表格的上面部分 -->
              <div class="search-box">
                <el-form>
                  <el-row>
                    <el-col :span="10"
                      ><el-input v-model="coursenameSelect" placeholder="课程名称"></el-input
                    ></el-col>
                    <el-col :offset="1" :span="10">
                  <!--查询按钮 -->
                    </el-col>
                    <el-col :span="3">
                      <el-button id="but3" type="primary" @click="coursenameSelectM"
                        >查询</el-button
                      >
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <!-- 弹出框里面的表格部分 -->
              <el-table :data="gridData" ref="multipleTable" @select="changeRow">
                <el-table-column type="selection"  width="55"></el-table-column>
                <el-table-column
                  width="150"
                  prop="ename"
                  label="课程名称"
                ></el-table-column>
                <el-table-column
                  width="100"
                    prop="cname"
                  label="教练"
                ></el-table-column>
                <el-table-column
                  width="300"
                  prop="vname"
                  label="支持场馆"
                ></el-table-column>
              </el-table>
              <!--弹出框里面放页面的部分 -->
              <div class="yeshu">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="limit"
                  :total="50 "
                  @current-change="change"
                  @prev-click="prev"
                  @next-click="next"
                >
                </el-pagination>

                <!-- 弹出框里面的取消与保存按钮 -->
                <p class="alertButton">
              <el-button  type="primary" slot="reference" @click="visible = false" 
                >取消</el-button>
                <el-button  type="primary" slot="reference"  
              @click="save" >保存</el-button>
                </p>
              </div>


              <!-- 添加课程按钮 -->
              <el-button id="button3" type="primary" slot="reference" @click="addcourse"
                >添加课程</el-button
              >
            </el-popover>
          </thead>

          <!-- 表中间的部分 -->
          <tbody>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="selection" width="100"> </el-table-column>

              <el-table-column
                fixed
                prop="cname"
                label="课程名称"
                width="200"
              >
              </el-table-column>
              <el-table-column prop="ename" label="教练" width="150">
              </el-table-column>
              <el-table-column prop="vname" label="支持场馆" width="150">
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="del(scope.$index, tableData)" type="text" size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </tbody>

          <!-- 表尾 -->
          <tfoot>
            <div id="div3" style="margin-top: 20px">
              <el-row>
                <el-col :span="16"
                  >
                </el-col>
                <el-col :span="8"
                  ></el-col>
              <p class="sendsave">
               <el-button type="primary" class="sendsaveBut" @click="send">完成，提交保存</el-button>
              </p>
              </el-row>
            </div>
          </tfoot>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.search-box {
  padding-bottom: 20px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}
.bg-purple-dark {
  background: #606266;
}
#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 24px;
  color: #adadad;
}
.bg-purple {
  background: #d3dce6;
  text-align: left;
}
#name {
  margin-top: 20px;
  position: absolute;
  left: 20px;
  color: #adadad;
  font-size: 20px;
}
#div3 {
  margin-top: 50px;
  text-align: left;
  margin-left: 100px;
}

.input1 {
  width: 200px;
  left: 30px;
}
.input2 {
  width: 200px;
}

#button3 {
  margin-left: 30px;
}

#item1 {
  width: 30px;
}
#item2 {
  width: 50px;
}
#item3 {
  width: 50px;
}
#but3 {
  width: 90px;
}
.yeshu {
  margin-left: 240px;
}
.inputcontent {
  width: 400px;
}
.alertButton{
  text-align: right;
}
.sendsave{
  text-align: center;
 
}
.sendsaveBut{
  width: 200px;
  height: 50px;
  margin-left: 100px;
}
</style>
<script>

export default {
  data() {
    return {
      ids:[],//放添加的数据的ids
      row:[],//选中的行
      visible:false,//弹出框是否显示
      coursenameSelect:'',//课程名称搜索
         page:1,//当前页面
         limit:5,//每页展示的条数
      searchOptionValue: "",
      multipleTable:[],
      // 全选下拉列表
      optionList: [
        { value: 1, lable: "1" },
        { value: 2, lable: "2" },
        { value: 3, lable: "3" },
        { value: 4, lable: "4" },
      ],
      gridData: [],

      tableData: [],

      ruleForm: {
        name: "",
        face: "",
        count: '',
        personCounts: '',
       startTime: "",
       endTime: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      addcourseData:[]
    };
  },
  mounted() {
    this.getCon();
  },
  methods: {
    //完成，提交保存事件
    send(){
      this.$axios({
        url:'/gym/coupon/add',
        method:'post',
         data:{
           name:this.ruleForm.name,
           face:this.ruleForm.face,
           count:Number(this.ruleForm.count),
           personCounts:Number(this.ruleForm.personCounts) ,
           startTime:this.ruleForm.startTime ,
           endTime: this.ruleForm.endTime,
           coursesSchedulingIds:this.ids
         }
      }).then((res)=>{
        if(res.data.error){
        this.$message.error("添加失败！");
        }
        else{
           this.$message.success("添加成功！");
        }
      })
    },
    //添加课程里保存有关的
    changeRow(row){
      this.row=row;
      this.ids.push(row[0].id) ;
    },

      //添加课程里的保存
       save(){
        this.tableData=this.row;
        this.visible=false;
        
       },
      //添加课程里面的查询
      coursenameSelectM(){
       this.$axios({
         url:'/gym/coupon/listCourses',
         method:'post',
         data:{
         name:this.coursenameSelect,
         page:this.page,
         limit:this.limit
         },
       }).then((res)=>{
          if(res.data.error){
              this.$message.error('页面查询失败');
          }
          else{
              this.$message.success('页面查询成功');
              this.gridData=res.data.data
          }
       })
      },
      

    //添加课程里的页面显示
    addcourse(){
      this.$axios({
        url:'/gym/coupon/listCourses',
        method:'post',
        data:{
          page:this.page,
          limit:this.limit
        }
      }).then((res)=>{
        if(res.data.error){
          this.$message.error('页面查询失败');
        }
        else{
           this.$message.success('页面查询成功');
            this.gridData=res.data.data

        }
      })
    },
    //当前页面改变
    change(page){
       this.page=page;
       this.getCon()
    },
    //页面++
    next(){
     this.page++;
     this.getCon()
    },
    //页面--
    prev(){
      this.page--;
      this.getCon();
    },

    //页面挂载时渲染页面
        mounted(){
          this.getCon()
        },
    //描绘页面
    async getCon() {
     
    },
 //表格里的删除事件
    del(index,rows) {
    rows.splice(index, 1);
    },
  },
};
</script>

